<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div></div>

      <div>
        <el-input
          style="width: 250px"
          v-model="input"
          placeholder="输入姓名,手机号,身份证进行搜索"
        ></el-input>
        <!-- 搜索 -->
        <el-button
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="likeEmployee()"
        ></el-button>

        <el-select
          v-model="receiptsStatusValue"
          style="width: 150px"
          placeholder="入库状态"
        >
          <el-option
            v-for="item in receiptsStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="success" @click="receiptsStatusSelect">查询</el-button>
      </div>
    </div>

    <div class="goods-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        style="width: 100%"
      >
	  <el-table-column prop="i" label="序号" fixed="left" width="60"></el-table-column>
        <el-table-column prop="id" label="产品订单号" fit width="160">
        </el-table-column>
        <el-table-column prop="partName" label="产品名称" fit width="80">
        </el-table-column>
        <el-table-column prop="model" label="型号" fit width="60">
        </el-table-column>
        <el-table-column prop="price" label="价格" fit width="80">
        </el-table-column>
        <el-table-column prop="count" label="数量" fit width="80">
        </el-table-column>
        <el-table-column label="产品图片" width="120">
          <template slot-scope="item">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :src="item.row.image"
                :preview-src-list="srcList"
                :fit="cover"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="isIncludingTax" label="是否含税" fit width="100">
          <template slot-scope="scope">
            <!-- {{ employeeStatuse(scope.row.employeeStatus) }} -->
            <el-tag size="medium" v-if="scope.row.isIncludingTax == 0">{{
              employeeStatuse(scope.row.isIncludingTax)
            }}</el-tag>
            <el-tag
              v-if="scope.row.isIncludingTax == 1"
              size="medium"
              color="#F67A7A"
              style="color: white"
              >{{ employeeStatuse(scope.row.isIncludingTax) }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column prop="remark" label="产品描述" fit width="180">
        </el-table-column>
        <!-- 进行中 未开始 已结束 -->
        <!-- <el-table-column prop="saleState" label="状态" fit width="100">
                    <template slot-scope="scope">
                        
                        <el-tag type="success"></el-tag>
                    </template>
                </el-table-column> -->
        <el-table-column prop="userId" label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="Employeeupda(scope.row.receiptsId)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.orderStatus == 0"
              size="mini"
              type="primary"
              @click="applyUpdateEmployee(scope.row.id)"
              disabled
              >订单审核</el-button
            >
            <el-button
              v-if="scope.row.orderStatus != 0"
              size="mini"
              type="primary"
              @click="applyUpdateEmployee(scope.row.purchaseOrdersId)"
              >订单审核</el-button
            >

            <el-button
              v-if="
                scope.row.receiptsStatus == 0 ||
                scope.row.receiptsStatus == null
              "
              size="mini"
              type="primary"
              @click="InventoryDetails(scope.row.receiptsId)"
              disabled
              >入库审核</el-button
            >

            <el-button
              v-if="
                scope.row.receiptsStatus != 0 &&
                scope.row.receiptsStatus != 3 &&
                scope.row.receiptsStatus != null
              "
              size="mini"
              type="primary"
              @click="InventoryDetails(scope.row.receiptsId)"
              >入库审核</el-button
            >
            <el-button
              v-if="roleType"
              size="mini"
              type="danger"
              @click="deleteGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增产品 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog"
      width="60%"
      :show-close="false"
      :title="title"
    >
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
      </el-form>
      <!--  -->
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="产品名称：" prop="productsName">
          <el-input
            type="text"
            v-model="prudproducts.productsName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="产品型号：" prop="model">
          <el-input
            type="text"
            v-model="prudproducts.model"
            placeholder="产品型号"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格：" prop="price">
          <el-input
            type="text"
            v-model="prudproducts.price"
            placeholder="价格"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品数量：" prop="number">
          <el-input
            type="text"
            v-model="prudproducts.number"
            placeholder="数量"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否含税：" prop="isIncludingTax">
          <el-select
            v-model="prudproducts.isIncludingTax"
            placeholder="是否含税"
          >
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="采购人：" prop="purchaser">
          <el-input
            type="text"
            v-model="prudproducts.purchaser"
            placeholder="采购人"
          ></el-input>
        </el-form-item>

        <el-form-item label="入库时间：" prop="storageTime">
          <el-date-picker
            v-model="prudproducts.storageTime"
            type="datetime"
            placeholder="入库时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结款方式：" prop="paymentType">
          <el-select v-model="prudproducts.paymentType" placeholder="结款方式">
            <el-option
              v-for="item in SexCategory2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供应商：" prop="suppliersId">
          <el-select
            v-model="prudproducts.suppliersId"
            placeholder="选择供应商"
          >
            <el-option
              v-for="item in SexCategory3"
              :key="item.suppliersId"
              :label="item.suppliersName"
              :value="item.suppliersId"
            >
              <span style="float: left">{{ item.suppliersName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.suppliersAddress
              }}</span>
            </el-option>
          </el-select>
          <el-button
            style="margin-left: 10px"
            type="success"
            size="mini"
            plain
            @click="addSupplier()"
            >添加供应商</el-button
          >
        </el-form-item>
        <el-form-item label="产品描述：" prop="description">
          <el-input
            style="width: 300px"
            type="textarea"
            :rows="2"
            :autosize="{ minRows: 4, maxRows: 8 }"
            placeholder="请输入产品描述"
            v-model="prudproducts.description"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="产品图片：" prop="image">
          <div
            style="
              display: flex;
              padding: 0rem;
              border: dashed 1px #c0c4cc;
              border-radius: 5px;
            "
          >
            <img :src="imageUrl" class="htimg" @click="selectFile(1)" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="applyButton == 0"
          @click="submitaddEmployeeForm"
          >确 定</el-button
        >
        <el-button
          type="primary"
          v-if="applyButton == 1"
          @click="UpdateEmployee(1)"
          >修 改</el-button
        >
        <el-button type="primary" @click="UpdateEmployee(2)"
          >新增产品</el-button
        >

        <!-- 库管入库审核 -->
        <el-button type="primary" @click="examineWarehousing(0)"
          >审核通过</el-button
        >

        <el-button type="primary" @click="examineWarehousing(2)"
          >不通过</el-button
        >
        <el-button
          type="primary"
          v-if="applyButton == 3"
          @click="ReviewArchives(true)"
          >通 过</el-button
        >
        <el-button
          type="danger"
          v-if="applyButton == 3"
          @click="ReviewArchives(false)"
          >不通过</el-button
        >
        <el-button @click="addFromDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  addEmployeeProfile,
  selectEmployeeProfileByName,
  devicesSelectList, //查询仓库产品列表
} from "../../api/all";
export default {
  components: {},
  data() {
    return {
      //搜索框的值
      input: "",
      // 图片预览
      srcList: [],
      srcList2: [],
      //新增标题
      title: "新增产品",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,

      // 表格加载
      loading: false,
      //合同到期提醒
      dialogImageUrl: "",
      dialogVisible: false,
      //新增采购表格数据
      prudproducts: {
        suppliersId: "", //供应商id
        productsId: "", //产品id
        productsName: "", //产品名称
        description: "", //产品描述
        price: "", //产品价格
        model: "", //产品型号
        isIncludingTax: "", //是否含税
        number: "", //产品数量
        image: "", //产品图片
        purchaser: "", //采购人
        storageTime: "", //入库时间
        paymentType: "", //结款方式 (1现金,2月结)
        status: "", //入库状态 （0已通过，1待审核,2审核失败）
      },
      tableData: [],
      //总数页
      total: 1,
      // 分页大小
      pageSize: 5,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
    };
  },
  mounted() {
    let kes = window.sessionStorage.getItem("loginUser");
    let userObject = JSON.parse(kes);
    if (userObject.roleType == "root") {
      this.roleType = true;
    }
    console.log("userObject", userObject.roleType);
    this.getAllGoods();
    // console.log("初始化时间:", dayjs())
    //通过入库名称搜索框查询
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  //超级管理员显示功能
  methods: {
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },

    // 新增产品
    submitaddEmployeeForm() {
      let val = this.infoPet();
      if (val == false) {
        return;
      }
      addEmployeeProfile(this.addEmployeeForm).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "新增失败",
          });
        }
      });
      this.addFromDialog = false;
    },

    //模糊查询信息
    likeEmployee() {
      selectEmployeeProfileByName(this.input).then((data) => {
        if (data.code) {
          this.tableData = data.data.map((item,index) =>{
			  item.i = index+1;
			  return item;
		  });
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },

    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },

    // 查询列表
    getAllGoods() {
      this.loading = true;
      // getGoodsList(this.currentPage, this.pageSize)
      devicesSelectList(this.currentPage, this.pageSize).then((res) => {
        if (res.code) {
          this.total = res.data.total;
          this.tableData = res.data.devicesVoList.map((item,index) =>{
			  item.i = (this.currentPage - 1) * this.pageSize + index + 1;
			  return item;
		  });
          //将图片地址放入数组,需要遍历循环加入数组
          for (let i = 0; i < res.data.devicesVoList.length; i++) {
            this.srcList.push(res.data.devicesVoList[i].image);
          }
          this.loading = false;
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}

.nameBox {
  overflow: auto; /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.goods-table {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
